<template>
  <div class="confirmOrder">
    <div class="order-address rx-sc" v-if="address.addressId" @click="onRouterPages('/myAddress','1')">
      <img src="../../assets/order/order-address-icon.png" />
      <div class="user">
        <div class="user-detail">{{address.userName}}<span> {{address.phone}}</span></div>
        <div class="user-address">{{address.location}}</div>
      </div>
    </div>
    <div class="order-address notAddress" @click="onRouterPages('/addressEdit')" v-else>
        <van-icon size="32px" :name="iconAdd" />
        <div>添加地址</div>
    </div>
    <div class="order-list mb24">
      <div class="order-title dis-sp">
        <div class="order-title-left rx-sc">
          <img src="../../assets/order/shop-icon.png" />
          <div class="">艺术收藏网</div>
        </div>
      </div>
      <div class="order-content dis-sp-s">
        <div class="order-goods rx-ss">
          <div class="goods-img">
            <van-image
              fit="cover"
              :src="goodsInfo.mainPhoto"
            />
          </div>
          <div class="goods-detail">
            <div class="goods-title">{{goodsInfo.goodsName}}</div>
            <div class="goods-label">包邮</div>
          </div>
        </div>
        <div class="" style="text-align: right">
          <div class="order-price">￥<span>{{goodsInfo.goodsPrice}}</span></div>
          <span class="order-num">x 1</span>
        </div>
      </div>
    </div>

    <div class="mb24 cellPay">
      <van-cell class="ones" :border="false" title="支付信息" size="large" />
      <van-cell title="商品金额">
        <div class="price">￥<span>{{price.realPrice}}</span></div>
      </van-cell>
    </div>

    <van-cell-group class="mb24">
      <van-cell title="配送方式" value="快递包邮" />
    </van-cell-group>
    <div :class="goodsInfo.goodsTag==2?'payBtn1':'payBtn'">
      <van-submit-bar
        :price="price.totalPrice*100"
        :button-text="goodsInfo.goodsTag==2?'支付定金':'支付订单'"
        @submit="onSubmit"
      />
    </div>
  </div>
</template>

<script>
import $api from "@/api/index";
//import WxJsSdk from "@/utils/WxJsSdk";
export default {
  name: "confirmOrder",
  components: {},
  data() {
    return {
      iconAdd:require("@/assets/icon/icon-add.png"),
      iconReturn:require("@/assets/icon/icon-return2.png"),
      paySuccess:{},
      address:{},
      goodsInfo:{},
      methods:{},
      price:{}
    };
  },
  methods: {
    onRouterPages(path,type){
      if(type == '1'){
        this.$router.push({path:path,query:{orderType:'1'}})
      }else{
        this.$router.push({path:path})
      }
    },
    getConfirmDetail(){
      $api.shopApi.confirmDetail({goodsId:this.goodsId || 2589,source:this.source||1}).then((res)=>{
        console.log(res.data)
        if(res.status == 10000){
          let currAddress = localStorage.getItem('CURR_ADDRESS') 
          if(currAddress){
            this.address = JSON.parse(currAddress)
          }else{
            this.address = res.data.address
          }
          this.goodsInfo = res.data.goodsInfo
          this.methods = res.data.methods
          this.price = res.data.price,
          this.goodsInfo.goodsTag = res.data.goodsTag
        }
      })
    },
    onSubmit() {
        // this.$router.replace({path:"/paySuccess",query:{source:this.source}})
        // return
      console.log("提交成功");
      let params = {
        source:this.source,
        goodsId:this.goodsInfo.goodsId,
        addressId:this.address.addressId
      }
      $api.orderApi.createOrder(params).then(res=>{
        
        console.log(res)
        if(res.status == 10000){
          let datas = res.data.data
          let that = this
          function onBridgeReady() {
            WeixinJSBridge.invoke(
              'getBrandWCPayRequest', {
                  "appId": datas.appId,     //公众号名称，由商户传入
                  "timeStamp": datas.timeStamp,         //时间戳，自1970年以来的秒数
                  "nonceStr": datas.nonceStr, //随机串
                  "package": datas.package,
                  "signType": datas.signType,         //微信签名方式：
                  "paySign": datas.paySign //微信签名
              },
              function (res) {
                  if (res.err_msg == "get_brand_wcpay_request:ok") {
                    that.$toast.success('支付成功');
                    that.$router.replace({path:"/paySuccess",query:{source:that.source}})
                  } else {
                    that.$toast.fail('您已取消支付');
                  }
              }
            )}
            if (typeof WeixinJSBridge == "undefined") {
                if (document.addEventListener) {
                    document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false);
                } else if (document.attachEvent) {
                    document.attachEvent('WeixinJSBridgeReady', onBridgeReady);
                    document.attachEvent('onWeixinJSBridgeReady', onBridgeReady);
                }
            } else {
                onBridgeReady();
            }
          }

      })
    },
    onClickLeft(){
      this.$router.go(-1)
    },
  },
  created() {
    let goodsId = this.$route.query.goodsId
    if(goodsId){
      this.goodsId = goodsId
    }
    let source = this.$route.query.source
    if(source){
      this.source = source
    }
    this.getConfirmDetail()
  },
  
  activated(){
  },
  
  beforeRouteLeave(to, from, next) {
      localStorage.removeItem('CURR_ADDRESS')
      next();
  }
};
</script>

<style lang="scss" scoped>
@import "../../styles/variables";
.confirmOrder{
  height: 100vh;
  background: #f7f7f7;
  .cellPay{
    .ones{
      padding-bottom: 0;
    }
  }
  .price{
      color:#50525A;
  }
  
  .order-address {
    height: 152px;
    padding: 0 24px;
    text-align: left;
    background: #fff;
    background-image: url("../../assets/icon/address_bg.png");
    background-repeat: repeat-x;
    background-position: left bottom;
    background-size: 100% 6px;
    img {
      width: 32px;
      height: 32px;
      margin-right: 24px;
    }
    .user-detail {
      color: #404040;
      font-size: 28px;
      margin-bottom: 8px;
      span {
        margin-left: 24px;
        color: #666666;
      }
    }
    .user-address {
      font-size: 24px;
      color: #666666;
    }
  }
  .notAddress{
    text-align: center;
    font-size: 24px;
    color: #666666;
    img{
      margin-right:0;
    }
    div{
      padding-top:20px;
    }
  }
  .order-list {
    margin-top: 24px;
    padding: 24px 24px 32px 24px;
    background: #fff;
    .order-title {
      margin: 0 0 32px 0;
      font-size: 28px;
      .order-title-left {
        color: #50525a;
        img {
          width: 32px;
          height: 32px;
          margin-right: 12px;
        }
      }
    }
    .order-goods {
      .goods-img {
        min-width: 160px;
        width: 160px;
        height: 160px;
        margin-right: 24px;
        border-radius: 4px;
        background: red;
        .van-image{
          width: 160px;
          height: 160px;
        }
      }
      .goods-title {
        height: 68px;
        font-size: 24px;
        color: #171823;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        margin-right: 60px;
        margin-bottom: 36px;
        text-align: left;
      }
      .goods-label {
        width: 60px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        border-radius: 4px;
        border: 2px solid #db1919;
        font-size: 20px;
        color: #db1919;
      }
    }
    .order-price {
      color: #8a8b90;
      font-size: 20px;
      span {
        font-size: 28px;
      }
    }
    .order-num {
      font-size: 24px;
      color: #8a8b90;
    }
  }
  .payBtn{
    .van-submit-bar{
      box-sizing:border-box;
      -webkit-box-sizing: border-box;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 170px;
      padding: 0px 24px;
      background: #FFFFFF;
      .van-submit-bar__bar{
        padding: 0;
      }
      .van-submit-bar__button--danger{
        padding: 0;
        font-size: 28px;
        width: 160px;
        height: 64px;
        background: #DB1919;
        border-radius: 2px;
        
      }
    }
  }
  .payBtn1 {
    .van-submit-bar{
      box-sizing:border-box;
      -webkit-box-sizing: border-box;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 170px;
      padding: 0px 24px;
      background: #FFFFFF;
      .van-submit-bar__bar{
        padding: 0;
      }
      .van-submit-bar__button--danger{
        padding: 0;
        font-size: 28px;
        width: 160px;
        height: 64px;
        background: linear-gradient(90deg, #47EB82 0%, #32D1CB 100%);
        border-radius: 2px;
        span {
          color: #fff;
        }
      }
    }
    span {
      color: #32D1CB;
    }
  }
}
</style>
